<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/common.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
</head>
<body>
    <div class="box">
       <div class="swiper-container">
           <div class="swiper-wrapper">
           <!-- 第一页 开始-->
               <section class="swiper-slide">
                   
                   <img src="images/marry.png" alt="" class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
                   <img src="images/pic2.png" alt="" class="ani"  swiper-animate-effect="slideInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s" >
                   <img src="images/pic1.png" alt="" class="ani" swiper-animate-effect="slideInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s">
                    <p class="name ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s">
                        <span>Julie</span>
                        <span>&</span>
                        <span>Ben</span>
                    </p>
                    <p class="what ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="3s">We got married</p>  
               </section>
               <!-- 第一页 结束 -->
               <!-- 第二页 开始 -->
               <section class="swiper-slide">
                    <img src="images/section2-pic4.png" alt="" class="ani">
                    <img src="images/section2-pic1.jpg" alt="" class="ani">
                    <img src="images/section2-pic2.png" alt="" class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
                    <img src="images/section2-pic3.jpg" alt="" class="ani"  swiper-animate-effect="rotateInDownRight" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
               </section>
               <!-- 第二页 结束 -->
               <!-- 第三页 开始 -->
               <section class="swiper-slide">
                  <img src="images/section3-pic1.png" alt="">
                  <img src="images/pic1.png" alt="" class="ani" swiper-animate-effect="bounce" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
                  <div >
                    <h3 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="1.5s">Our story</h3>
                    <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="2.5s">As the eastern sky startedunfolding like the cnmson petals of a gigantic flower, I was overcome by awave of romantic feelings and nostalgia ——vivid memorie not diminished by thefact that almost ten years had passed.</p>
                  </div>
               </section>
               <!-- 第三页 结束 -->
               <!-- 第四页 开始 -->
               <section class="swiper-slide">
                  <img src="images/section4-pic1.jpg" alt="">
                  <img src="images/section4-pic2.png" alt="" class="ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
               </section>
               <!-- 第四页 结束 -->
               <!-- 第五页 开始 -->
               <section class="swiper-slide">
                  <img src="images/section5-pic2.png" alt="">
                  <img src="images/section5-pic1.jpg" alt="" class="ani" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="2.5s">
                  <img src="images/pic1.png" alt="" class="ani">
                  <div class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s"></div>
                  <p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s"></p>
               </section>
               <!-- 第五页 结束 -->
               <!-- 第六页 开始 -->
               <section class="swiper-slide">
                 <img src="images/section6-pic1.png" alt="">
                 <img src="images/section6-pic2.png" alt="" class="ani">
                 <p class="ani">
                   <span>未</span>
                   <span>完</span>
                   <span>待</span>
                   <span>续</span>
                   <span>.</span>
                   <span>.</span>
                   <span>.</span>
                 </p>
               </section>
               <!-- 第六页 结束 -->
               
           </div>
            <img src="images/arrow.png" style="width:.65rem;height:.5rem;position:fixed; bottom:.1rem; left:45.5%; " id="array">
           <audio src="video/lucky.m4a" autoplay loop style="position:fixed;top:0;right:0 ;"></audio>  
       </div> 
    </div>

    <script type="text/javascript">
        var mySwiper = new Swiper ('.swiper-container', {
            direction:"vertical",
            onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素 
            swiperAnimate(swiper); //初始化完成开始动画
         },
          onSlideChangeEnd: function(swiper){ 
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
          } 
          })     
    </script>
</body>
</html>